<template>
	<view class="content">
		<!-- 搜索栏 -->
		<view class="dis-flex flex-y-center flex-x-between">
			<u-search placeholder="用户昵称/手机号码" @custom='searchUser' @search='searchUser' v-model='searchText'></u-search>
		</view>
		<view>
			<u-button size='mini' type="success" class='addUser' plain @click='addUser'>
				<u-icon name="plus"></u-icon>添加
			</u-button>
		</view>
		<view class="userList bb dis-flex flex-x-between flex-x-center" v-for="(item,index) in userList" :key='this'>
			<view class="f-38">
				{{item.alias}}
			</view>
			<view class="dis-flex">
				<u-button type="error" plain @click="disableUser(item.userId)" v-if="item.status" shape="square" size="mini">禁用</u-button>
				<u-button type="warning" plain @click="relieveUser(item.userId)" v-if="!item.status" shape="square" size="mini">解禁</u-button>
				<u-button type="primary" plain @click="modifyUser(index)" shape="square" size="mini">编辑</u-button>
			</view>
		</view>

		<u-popup v-model="userPopup" mode="center" closeable width='700'>
			<view class="dis-flex flex-dir-column flex-x-center flex-y-center">
				<view class="UserFrom">
					<u-form :model="form" ref="uForm">
						<u-form-item label="昵称" prop="alias" class='f-24' label-width='150' label-align='center'>
							<u-input v-model="form.alias" type='text' />
						</u-form-item>
						<u-form-item label="手机号码" prop="mobilePhone" class='f-24' label-width='150' label-align='center'>
							<u-input v-model="form.mobilePhone" type='number' />
						</u-form-item>
						<view class="f-22 defaultpassword" v-if="!form.alias">(默认密码为手机号后6位)</view>
					</u-form>
				</view>
				<u-button size='medium' class='sumbit' @click='sumbit'>确定</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userPopup: false,
				form: {
					alias: '',
					mobilePhone: ''
				},
				userList: [],
				rules: {
					alias: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}],
					mobilePhone: [{
						required: true,
						// 自定义验证
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur']
					}],

				},
				page: 1,
				searchText: ''
			}
		},
		watch: {
			userPopup: function(val) {
				if (this.userPopup) {
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules);
					})

				}
			},

		},
		onLoad() {
			this.getUser(this.page)
		},
		methods: {
			// 获取用户信息
			getUser(page, mobilePhone, alias, falg) {
				this.$u.api.getAllByPage({
					pageNo: page,
					pageSize: 15,
					alias: alias || '',
					mobilePhone: mobilePhone || ''
				}).then(res => {
					if (falg) {
						this.userList = res.data;
					} else {
						if (this.userList.length) {
							res.data.concat(this.userList);
						} else {
							this.userList = res.data;
						}
					}
				})
			},
			// 修改用户信息
			modifyUser(index) {
				this.userPopup = true;
				this.form = this.userList[index];
			},
			//禁用用户
			disableUser(id) {
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定禁用',
				    success: function (res) {
				        if (res.confirm) {
				            _this.$u.api.userDisable(id).then(res => {
				            	_this.$refs.uToast.show({
				            		title: '操作成功',
				            		type: 'success'
				            	})
				            	_this.getUser(1, '', '', true);
				            })
				        } else if (res.cancel) {
				        }
				    }
				});
				
			},
			relieveUser(id) {
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定解禁',
				    success: function (res) {
				        if (res.confirm) {
				           _this.$u.api.relieve(id).then(res => {
				           	_this.$refs.uToast.show({
				           		title: '操作成功',
				           		type: 'success'
				           	})
				           	_this.getUser(1, '', '', true);
				           })
				        } else if (res.cancel) {
				        }
				    }
				});
				
			},
			// 添加
			addUser() {
				this.userPopup = true;
				this.form = {};
			},
			searchUser() {
				if (this.$u.test.mobile(this.searchText)) {
					this.getUser(this.page, this.searchText, '', true);
				} else {
					this.getUser(this.page, '', this.searchText, true);
				}
			},
			// 确定
			sumbit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.updateUser(this.form).then(res => {
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success'
							})
							this.userPopup = false;
							this.getUser(1);
						})
					}
				})
			}
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			this.getUser(++this.page);
		}
	}
</script>

<style scoped>
	.operation {
		margin-left: 10rpx;
		color: rgb(41, 121, 255);
		border-bottom: 1px solid rgb(41, 121, 255);
	}

	.userList {
		height: 100rpx;
	}

	.userList button {
		margin-left: 20rpx;
	}

	.content {
		padding: 24rpx 30rpx;
	}

	.alias {
		margin-right: 20rpx !important;
		flex: 1;
	}

	.defaultpassword {
		color: red;
		margin-top: 10rpx;
	}

	.addUser {
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.UserFrom {
		width: 600rpx;
		padding: 30rpx;
		padding-top: 80rpx;
	}

	.sumbit {

		margin: 40rpx 0;
	}
</style>
